import { useRef, useState } from 'react';
import './AdvancedImageMagnifier.css';

const AdvancedImageMagnifier = ({
  src,
  alt = '图片',
  width = 400,
  height = 300,
  magnifierSize = 200,
  zoomLevel = 2.5,
  showMagnifier = true,
}) => {
  const [isHovering, setIsHovering] = useState(false);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const imageRef = useRef(null);

  const handleMouseMove = (e) => {
    if (!imageRef.current) return;

    const rect = imageRef.current.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // 确保鼠标位置在图片范围内
    if (x >= 0 && x <= rect.width && y >= 0 && y <= rect.height) {
      setMousePosition({ x, y });
    }
  };

  const handleMouseEnter = () => {
    setIsHovering(true);
  };

  const handleMouseLeave = () => {
    setIsHovering(false);
  };

  // 计算放大区域的位置和背景位置
  const magnifierStyle = {
    position: 'absolute',
    width: `${magnifierSize}px`,
    height: `${magnifierSize}px`,
    border: '2px solid #333',
    borderRadius: '8px',
    pointerEvents: 'none',
    backgroundImage: `url(${src})`,
    backgroundSize: `${width * zoomLevel}px ${height * zoomLevel}px`,
    backgroundPosition: `-${
      mousePosition.x * zoomLevel - magnifierSize / 2
    }px -${mousePosition.y * zoomLevel - magnifierSize / 2}px`,
    display: isHovering && showMagnifier ? 'block' : 'none',
    left: `0px`, // 在图片右侧显示
    top: `${(height - magnifierSize) / 2}px`, // 垂直居中
    zIndex: 1000,
    boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
  };

  return (
    <div className="advanced-image-magnifier-container">
      <div className="image-section">
        <div
          className="image-container"
          style={{
            position: 'relative',
            width: `${width}px`,
            height: `${height}px`,
            overflow: 'hidden',
          }}
          onMouseMove={handleMouseMove}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        >
          <img
            ref={imageRef}
            src={src}
            alt={alt}
            style={{
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              cursor: 'crosshair',
            }}
          />

          {/* 鼠标跟随的指示器 */}
          {isHovering && (
            <div
              className="mouse-indicator"
              style={{
                position: 'absolute',
                width: '20px',
                height: '20px',
                borderRadius: '50%',
                border: '2px solid #fff',
                backgroundColor: 'rgba(255, 255, 255, 0.3)',
                left: `${mousePosition.x - 10}px`,
                top: `${mousePosition.y - 10}px`,
                pointerEvents: 'none',
                zIndex: 1001,
                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
              }}
            />
          )}
        </div>
      </div>

      {/* 放大区域 */}
      <div className="magnifier-section">
        <div ref={null} style={magnifierStyle} />

        {/* 放大区域说明 */}
        {isHovering && (
          <div className="magnifier-info">
            <p>放大区域</p>
            <p>倍率: {zoomLevel}x</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default AdvancedImageMagnifier;
